<template>
<div class="modal" :class="{'is-active': visible}">
  <div class="modal-background"></div>
  <div class="modal-card" :style="{'width': d_width,'min-width': '240px'}">
    <header class="modal-card-head">
      <slot name="header">
        <p class="modal-card-title">{{ title }}</p>
      </slot>
      <button class="delete" aria-label="close" v-if="closable" @click="close"></button>
    </header>
    <section class="modal-card-body">
      <div class="columns">
        <div class="column is-2" v-if="!!iconName">
          <span class="icon is-large" :class="iconColor">
            <i class="fa fa-3x" :class="'fa-'+iconName"></i>
          </span>
        </div>
        <div class="column">
          <component v-if="!!unit" :is="unit">
          </component>
          <div class="content" v-html="content" v-else></div>
        </div>
      </div>
    </section>
    <footer class="modal-card-foot" v-if="!footerHide" style="display: block;text-align: right;">
      <slot name="footer">
      </slot>
    </footer>
  </div>
</div>
</template>
<script>
  export default {
    name: 'Dialog',
    props: {
      value: {
        type: Boolean,
        default: false
      },
      closable: {
        type: Boolean,
        default: true
      },
      maskClosable: {
        type: Boolean,
        default: true
      },
      title: {
        type: String
      },
      iconType: {
        type: String
      },
      content: {
        type: String
      },
      unit: {
      },
      width: {
        type: [Number, String],
        default: 520
      },
      okText: {
        type: String
      },
      cancelText: {
        type: String
      },
      // for instance
      footerHide: {
        type: Boolean,
        default: false
      },
      scrollable: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        visible: this.value,
        iconName: '',
        iconColor: '',
        d_width: ''
      };
    },
    methods: {
      close () {
        this.visible = false;
        this.$emit('on-cancel');
      },
      mask () {
        if (this.maskClosable) {
          this.close();
        }
      },
      cancel () {
        this.close();
      },
      ok () {
        this.visible = false;
        this.$emit('input', false);
        this.$emit('on-ok');
      },
      EscClose (e) {
        if (this.visible && this.closable) {
          if (e.keyCode === 27) {
            this.close();
          }
        }
      },
      addScrollEffect () {
        var target = document.getElementsByTagName('HTML')[0]
        var hCls = target.className
        var cls = hCls.split(' ')
        if(!hCls) cls = []
        if(cls.indexOf('is-clipped') == -1){
          cls.push('is-clipped')
          target.className = cls.join(' ')
        }
      },
      removeScrollEffect() {
        var target = document.getElementsByTagName('HTML')[0]
        var hCls = target.className
        var cls = hCls.split(' ')
        var i = cls.indexOf('is-clipped')
        if(i > -1){
          cls.splice(i,1)
          target.className = cls.join(' ')
        }
      }
    },
    mounted () {
      // ESC close
      document.addEventListener('keydown', this.EscClose);
    },
    beforeDestroy () {
      document.removeEventListener('keydown', this.EscClose);
    },
    watch: {
      value (val) {
        this.visible = val;
      },
      visible (val) {
        if (val === false) {
          this.removeScrollEffect();
        } else {
          if (this.timer) clearTimeout(this.timer);
          if (!this.scrollable) {
            this.addScrollEffect();
          }
        }
      },
      iconType (val) {
         switch (val) {
         case 'info':
           this.iconName = 'info-circle';
           this.iconColor = 'has-text-info';
           break;
         case 'success':
           this.iconName = 'check-circle-o';
           this.iconColor = 'has-text-success';
           break;
         case 'warning':
           this.iconName = 'warning';
           this.iconColor = 'has-text-warning';
           break;
         case 'error':
           this.iconName = 'frown-o';
           this.iconColor = 'has-text-danger';
           break;
         case 'confirm':
           this.iconName = 'question-circle';
           this.iconColor = 'has-text-info';
           break;
         }
      },
      unit (val) {
      },
      content (val) {
      },
      scrollable (val) {
        if (!val) {
          this.addScrollEffect();
        } else {
          this.removeScrollEffect();
        }
      },
      title (val) {
      },
      width (val) {
        this.d_width = typeof val === 'number' ? val + 'px' : val
      }
    }
  };
</script>